/**
 * Created by david on 10/4/13.
 */
var TipsView = Parse.View.extend({


    el: '.table-tips',

    events: {
        // edit event for the people account payment item
        'click .edit-btn': function (e) {
            e.preventDefault();
            var index = $(e.target).closest('tr').index();
            this.displayEdit(index);
        },
        // save the paypal account of the people
        'click .save-btn': function (e) {
            e.preventDefault();
            // save the model
            var index = $(e.target).closest('tr').index();
            this.savePaypalAccount(index);

            // set the value in to the list
            var text_box = $($('#view1').find('tr')[index]).find('.edit-txt');
            if (text_box.attr('readonly') != 'readonly') {
                // text box is ready to save
                text_box.attr('readonly', true);
                text_box.attr('style', '');
            }
        },
        // delete paypal account for the people
        'click .delete-btn': function (e) {
            e.preventDefault();
            var index = $(e.target).closest('tr').index();
            this.deletePaypalAccount(index);
        },
        // edit event for focus into place payment account
        'click #edit-btn': function (e) {
            $('#paypal-place-account').focus();
        },

        // save event for save place payment account
        'click #save-btn': function (e) {
            e.preventDefault();
            this.savePlace();
        },

        // delete event for delete place payment account
        'click #delete-btn': function (e) {
            e.preventDefault();
            this.deletePlaceAccount();
        },
        // active tip config
        'click #active-tips' : function() {
              if($('#active-tips').is(':checked')) {
                  // unlock the check box show tips
                  $('#show-tips').removeAttr('disabled');

              } else {
                  // disable the show tip
                  $('#show-tips').removeAttr('checked');
                  $('#show-tips').attr('disabled','disabled');
              }
        },

        // event save tip config
        'click #save-tip-config' : function(e) {
            // get the value from UX
            e.preventDefault();
            var activeStatus = '';
            var showTip = '';
            if($('#active-tips').is(':checked')) {
                activeStatus = true;
            }
            if($('#show-tips').is(':checked')) {
                showTip = true;
            }
            // call static function for saving
            Tip.saveTipConfig(placeId,activeStatus,showTip);
        },
        'change #value-cash': function(e) {
            var valueCash = $('#value-cash').val();
            Tip.saveValueCash(placeId,valueCash);
        }

    },

    /*
     *  initialize tipView
     */

    initialize: function () {
        var view = this;
        this.accounts = new TipCollection;
        $(document).on('click', '#download-btn', function (e) {
            e.preventDefault();
            view.InfographicSubmit();
        });
        $(document).on('click', '#print-infographic-btn', function () {
            view.printInfographic();
        })

    },

    /*
     @render the people list
     */
    render: function (list) {

        for (var i = 0; i < list.length; i++) {
            var payment = new Tip;
            payment.set({name: list[i].name, accountName: list[i].accountName, objectId: list[i].objectId});
            this.accounts.add(payment);
            var html_string =
                '<tr>' +
                    '<td>' + list[i].name + '</td>' +
                    '<td><input type="text" class="edit-txt" readonly value="' + list[i].accountName + '"></td>' +
                    '<td><a href="#" class="save-btn"><img src="' + wwwUrl + 'www/images/plus.png"></i></a></td>' +
                    '<td><a href="#" class="edit-btn"><i class="action edit"></i></a></td>' +     // call edit function
                    '<td><a href="#" class="delete-btn"><i class="action delete"></i></a></td>' +   // call delete function
                    '</tr>';

            $('#view1').append(html_string);
        }
    },

    /*
     @load people payment from parse
     */
    getPeopleList: function () {
        var view = this;
        utils.showLoading();
        Tip.getPeople(placeId).done(function(resp){
            view.render(resp);
            utils.hideLoading();
        }, function(){
            utils.hideLoading();
        })
    },




    /*
     * display edit for people payment account
     */

    displayEdit: function (index) {
        var text_box = $($('#view1').find('tr')[index]).find('.edit-txt');
        // unlock text box for edit
        text_box.attr('readonly', false);
        text_box.attr('style', 'border:1px solid !important');
        text_box.focus();
    },

    /*
     * @save the paypal account of the people
     */

    savePaypalAccount : function(index) {
        utils.showLoading();
        this.accounts.at(index - 1).save().done(function(){
            utils.hideLoading();
        },function(){
            utils.hideLoading();
        });
    },
    /*
     @delete people paypal account from model and view
     */
    deletePaypalAccount : function (index) {
        var view = this;
        utils.showLoading();
        // delete from the model
        this.accounts.at(index-1).delete().done(function(){
            utils.hideLoading();
            $(this.el).find('tr')[index].remove();
        }, function() {
            utils.hideLoading();
        })
    },



    /*
     * Save place payment account. Save payment account of place for payment all people
     */

    savePlace: function () {
        var view = this;
        // get accountName of the people
        var accountName = $('#paypal-place-account').val();
        if (placeId != '') {
            utils.showLoading();
            console.log(this.model);
            // call the static function for save place account
            Tip.savePlaceAccount(placeId, accountName).done(function () {
                utils.hideLoading();
            }, function () {
                utils.hideLoading();
            })
        }
    },
    /*
     * delete payment account of place.
     */

    deletePlaceAccount: function () {
        var view = this;
        view.showLoading();
        $.ajax({
            url: deletePlacePaypalAccountUrl,
            type: 'POST',
            dataType: 'json',
            data: {placeId: placeId, accountName: $('#paypal-place-account').val() },
            success: function (resp) {
                view.hideLoading();
                window.location.href = view.url.indexUrl + '?id=' + placeId;
            }
        })
    },

    /*
     * @print infograhic (List of review tips)
     */

    printInfographic: function () {
        var title = '<h3 style="text-align: center">Infographic Tip Vote</h3>';
        var html_listVote = '';
        var html_header =
            '<div id="infographic_votelist">' +
                '<table cellpadding="0" cellspacing="0" style="width:100%; border: 1px solid #ff0087;">' +
                '<tr>' +
                '<th style="color:#FF0087; font-weight:normal;width: 125px;padding:5px;text-align: center">Date</th>' +
                '<th style="color:#FF0087; font-weight:normal;width: 125px;padding:5px;text-align: center">To</th>' +
                '<th style="color:#FF0087; font-weight:normal;width: 125px;padding:5px;text-align: center">Amount</th>' +
                '<th style="color:#FF0087; font-weight:normal;width: 125px;padding:5px;text-align: center">From</th>' +
                '<th style="color:#FF0087; font-weight:normal;width: 125px;padding:5px;text-align: center">Commments</th>' +
                '</tr>';
        var html_footer = '</table></div>';
        var html_content = '';

        _.each(tipsView.model.models, function (item) {
            var date = dateFormat(new Date(item.createdAt), 'dd/mm/yyyy HH:MM');
            html_content = html_content +
                '<tr>' +
                '<td style="width: 125px; text-align: center;padding: 5px">' + date + '</td>' +
                '<td style="width: 125px; text-align: center;padding: 5px">' + item.peopleName + '</td>' +
                '<td style="width: 125px; text-align: center;padding: 5px">' + item.get('amount') + '</td>' +
                '<td style="width: 125px; text-align: center;padding: 5px">' + item.creatorName + '</td>' +
                '<td style="width: 125px; text-align: center;padding: 5px">' + item.get('comments') + '</td>' +
                '</tr>';
        });

        var html_list = html_header + html_content + html_footer;
        $('#print-infographic').html('');
        $('#print-infographic').append(title);
        $('#print-infographic').append(html_list);

        $('#tips-infographic-dialog').dialog('open');

    },

    /*
     * submit inforgrahic form form info
     */
    InfographicSubmit: function () {
        var html = $('#print-infographic').html();
        $('#html_string').val(html);
        $('#download-pdf-form').submit();
    }


});


/*
 * Vote handler
 */

window.VoteView = Parse.View.extend({
    el: 'divVote',
    events: {},
    initialize: function () {
        _.bindAll(this, 'render', 'paginate');
    },
    render: function () {
        this.paginate();
    },
    paginate: function (page) {
        $('#tbl-vote tr:gt(0)').remove();
        $('.pagination').html('');

        if (page == null || page <= 0) {
            page = 1;
        }

        var limit = 5;
        var offset = limit * (page - 1);

        //find the vote
        var Vote = Parse.Object.extend("Vote");
        var query = new Parse.Query(Vote);
        //pagination
        query.count({
            success: function (count) {
                var totalPage = Math.ceil(count / limit);

                // The count request succeeded. Show the count
                for (i = 1; i <= totalPage; i++) {
                    $('.pagination').append('<a href="#page/' + i + '">' + ' ' + i + ' ' + '</span>');
                }
            },
            error: function (error) {
                // The request failed
            }
        });

        query.limit(limit);
        query.skip(offset);
        query.descending("createdAt");
        query.find({
            success: function (results) {
                _.defer(function () {
                    $('.loading').hide();
                });
                // remove the current collection tip items
                if (tipsView.model.length > 0) {
                    tipsView.model.reset();
                }

                _.each(results, function (vote) {
                    // add tipVote to tip collection for print the infographic
                    tipsView.model.add(vote);

                    var peopleObj = vote.get('people');
                    if (peopleObj != 'undefined') {
                        var people = Parse.Object.extend("People");
                        var peopleQuery = new Parse.Query(people);


                        peopleQuery.get(peopleObj.id, {
                            success: function (returnPeople) {

                                // The object was retrieved succesfully.
                                vote.set('people', returnPeople);
                                var date = dateFormat(new Date(vote.createdAt), 'dd/mm/yyyy HH:MM');

                                //find user
                                var userObj = vote.get('user');

                                if (userObj != null) {
                                    var user = Parse.Object.extend('User');
                                    var userQuery = new Parse.Query(user);
                                    userQuery.get(userObj.id, {
                                        success: function (returnUser) {
                                            vote.creatorName = returnUser.get('username');
                                            vote.peopleName = returnPeople.get('peopleName');
                                            var html = '<tr>\n\
                                                        <td>' + date + '</td>\n\
                                                        <td>' + returnPeople.get('peopleName') + '</td>\n\
                                                        <td>' + vote.get('currency') + vote.get('amount') + '</td>\n\
                                                        <td>' + returnUser.get('username') + '</td>\n\
                                                        <td>' + vote.get('comment') + '</td>\n\
                                                    </tr>';
                                            $('#tbl-vote').append(html);
                                        }
                                    });
                                } else {
                                    //
                                    var html = '<tr>\n\
                                                <td>' + date + '</td>\n\
                                                <td>' + returnPeople.get('peopleName') + '</td>\n\
                                                <td>' + vote.get('currency') + vote.get('amount') + '</td>\n\
                                                <td>' + 'Anonymous' + '</td>\n\
                                                <td>' + vote.get('comment') + '</td>\n\
                                            </tr>';
                                    $('#tbl-vote').append(html);
                                }


                            },
                            error: function (object, error) {
                                // The object was not retrieved successfully.
                                console.log(object);
                            }
                        });
                    }
                });
            },
            error: function (error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });
    }
});


var AppRouter = Parse.Router.extend({
    routes: {
        "": "index",
        'page/:page': 'index'
    },
    initialize: function () {
        this.voteView = new VoteView();
    },
    //index action
    index: function (page) {
        if (page == null) {
            this.voteView.render();
        } else {
            this.voteView.paginate(page);
        }
    }

});

app = new AppRouter();
Parse.history.start();